<template>
	<view class="productDetail">
		<uni-swiper-dot :info="info.covers" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" interval="3000" duration="500" circular="true" autoplay="true">
				<swiper-item v-for="(item, index) in info.covers" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="info">
			<view class="top">
				<view class="pic">
					<text>会员：￥{{info.nowPrice}}</text>
				</view>
				<view class="title">
					<view>
                        <image v-if="info.is_open_commission == 1" class="con-img" src="../static/img/fire.png" mode="" @tap.stop="showCommission()"></image>
                        <text @click="showReduction()" class="state" style="background:rgba(235, 89, 56, 1);">{{info.reductionName}}{{info.isReduction == 1 ? '满减' : ''}}</text>
                        {{info.name}}
                    </view>
					<view v-if="info.storePrice > 0">门店价：￥{{info.storePrice}}</view>
					<view v-if="info.is_virtual > 0">会员价：￥{{info.userPrice}}</view>
				</view>
				<button  class="share" open-type="share">
					<image src="http://app.chinasrv.com/attachment/xcx/icon/icon29.png" mode="aspectFill"></image>
					<text>分享</text>
				</button>
			</view>
			<view class="num">
				<text>销量 {{info.sales}}</text>
				<text>库存 {{info.stock}}</text>
				<text>收藏 {{info.collect_num}}</text>
			</view>
		</view>
		<view class="line" @click="editSubType('')" v-if="false">
			<view class="left">
				<text>选择</text><text>{{selAttrValName}}</text>
			</view>
			<view class="right">
				<text></text>
			</view>
		</view>
		<view class="content">
			<view class="content_title">商品详情</view>
			<view class="details" v-html="info.intro"></view>
		</view>
		<view class="line1" v-if="info.recommendList.length > 0">
			<view class="left">
				<text>相关商品推荐</text>
			</view>
			<view class="right">
				<!-- <text @click="jump('store')">更多</text> -->
			</view>
		</view>
		<!-- <view class="heng"></view> -->
		<view class="content1" v-if="info.recommendList.length > 0">
			<view class="list">
				<view class="list_item" v-for="(item,index) in info.recommendList" :key="index" @click="jump('product_view', 'merchantId='+item.merchantId+'&id='+item.id)">
					<image :src="item.picture" mode="" lazy-load="true"></image>
					<view class="item_text">{{item.name}}</view>
					<view class="item_text1">{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="line1">
			<view class="left">
				<text>商品点评</text><text>{{info.evaluateStat.total_num}}</text>
			</view>
			<view class="right">
				<text @click="jump('product_common', info.id)">查看全部</text>
			</view>
		</view>
		<view class="comment" v-for="(item,index) in evaluateList" :key="index">
			<view class="left">
				<image :src="item.head_portrait" mode="aspectFill" lazy-load="true"></image>
			</view>
			<view class="right">
				<view class="name">
					<view class="txt">
						<text>{{ item.member_name }}</text>
						<text>{{ item.create_time }}</text>
					</view>
					<view class="txt1">{{item.explain}}</view>
				</view>
				<view class="txt2">{{ item.content }}</view>
				<view class="comment_img" v-if="item.covers.length > 0">
					<image :src="item2.thumbUrl" v-for="(item2,index2) in item.covers" mode="aspectFill" lazy-load="true"
					@tap="previewImage" :data-src="item2.imgUrl" :data-id="item.id"></image>
				</view>
				<view class="txt3" v-if="item.is_explain > 0">
					<text>商家回复：</text>
					<text>{{item.explain_first}}</text>
				</view>
			</view>
		</view>
		<view class="nocomment" v-if="evaluateList.length == 0">
			暂无评价～
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" >
			<view class="car" @click="jump('cart')">
				<image src="http://app.chinasrv.com/attachment/xcx/icon/icon18.png" mode="widthFix"></image>
				<text>购物车</text>
				<view class="carnum" v-if="cartNum>0">{{cartNum}}</view>
			</view>
			<view :class="info.myCollect == 1?'collect':'nocollect'" @click="collectThis()">
				<image :src="info.myCollect == 1?'http://app.chinasrv.com/attachment/xcx/icon/collect1-new.png':'http://app.chinasrv.com/attachment/xcx/icon/collect.png'" mode="widthFix"></image>
				<text>收藏</text>
			</view>
			<view class="right">
				<view class="add" @click="editSubType('addCart')">加入购物车</view>
				<view class="pay" @click="editSubType('addOrder')">立即购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup" >
				<image @click="close" class="close" src="http://app.chinasrv.com/attachment/xcx/icon/close.png" mode="aspectFill"></image>
				<view class="goods_info">
					<image :src="selAttr.picture" mode="aspectFill" @click="productView()"></image>
					<view class="right">
						<text>￥{{selAttr.price > 0 ? selAttr.price : '0.00'}}</text>
						<view class="goods_num">
							<text>库存：{{selAttr.stock}}</text>
							<text v-if="selAttr.data_name != ''">已选：{{selAttr.data_name}}</text>
						</view>
					</view>
				</view>
				<view style="padding-bottom: 20upx;padding-left: 20upx;">{{info.series_name}}</view>
				<scroll-view class="scroll" scroll-y="true" show-scrollbar="false" style="max-height: 500upx;">
					<view class="goods_size" v-if="seriesList.length > 0">
						<view :class="'series_item ' + (seriesItem.id == selSeriesId ? 'selSeries' : '')" v-for="(seriesItem, index) in seriesList" :key="index" @click="selSeriesFun(index)">
							<text class="title">{{seriesItem.name}}</text>
							<text class="price">￥{{seriesItem.nowPrice}}</text>
						</view>
					</view>
					<view class="goods_size" v-for="(item, index) in attributeList" :key="index">
						<text class="title">{{item.name}}</text>
						<view class="size_item">
							<text :class="selAttrList[item.id] && selAttrList[item.id] == attrVal.base_spec_value_id ?'sel':'nosel'" v-for="(attrVal,index1) in item.value" :key="index1" @click="selAttrFun(index, index1)" :style="(noStockList.indexOf(attrVal.base_spec_value_id) >= 0 ? 'color: #ddd;' : '')">{{attrVal.title}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="goods_num1">
					<text>购买数量</text>
					<!-- <uni-number-box>
					</uni-number-box> -->
					<view class="uni-numbox">  
						<view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'" @click="_calcValue('subtract')">-</view>  
						<input class="uni-numbox-value" type="number" :value="inputValue" @blur="_onBlur">  
						<view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'" @click="_calcValue('add')">+</view>
					</view>  
				</view>
				<view style="text-align: right;margin-right: 20px;margin: 30rpx;">最少购买：{{min}}</view>
				<view class="newBtn" :style="'height:' + bottomHeight + 'rpx;'">
					<view class="add" @click="subSel('addCart')">加入购物车</view>
					<view class="pay" @click="subSel('addOrder')" style="background: #eb5938;">立即购买</view>
				</view>
				<!-- <view v-else  @click="subSel()" class="goods_bot">选好了</view> -->
			</view>
		</uni-popup>
	</view>
</template>


<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import {Base64} from '../static/base64.min.js';
	export default { 
		data() {
			return {
				mode: 'round',
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				}, //轮播图样式配置
				reductionRemark: '',
				id : 0,
				info: {
					name: '商品名称',
					sales: 0,
					stock: 0,
					collect_num: 0,
					recommendList: [],
					userPrice: 0,
					storePrice : 0,
					wholesalePrice : 0,
					nowPrice : 0,
					is_virtual : 0,
					series_id : 0,
					reductionName: ''
				},
				cartNum: 0,
				selAttr:{
					'picture' : '',
					'price' : '',
					'point_exchange': '',
					'stock' : '',
					'data' : '',
					'data_name' : '',
				},
				min : 0,
				max : 0,
				step: 0,
				attributeList: [],
				skuList: [],
				selAttrList: [],
				noStockList: [],
				selSeriesId: 0,
				seriesList: [],
				selSkuId: 0,
				inputValue : 0,
				selAttrValName : '选择',
				disableAttrList : true,
				disableSubtract : true,
				disableAdd : true,
				isSelNum : true,
				subType : '',
				pay_type : 0,
				imgList: [],
				evaluateList: [],
				shareItem: {
					title: '',
					path: '',
					imageUrl: '',
					success: function(){
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						});
					},
					fail: function(){
						console.info(11);
						uni.showToast({
							title: '取消分享',
							icon: 'none'
						});
					}
				},
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			}
		}, 
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			_calcValue(type) {  
				const scale = this.min;  
				let value = this.inputValue;  
				let step = this.step * scale;  
                console.info(this.max);
				if (type === 'subtract') {  
					value -= step  
				} else if (type === 'add') {  
					value = parseInt(Number(value) + Number(step))
				}  
				if (value < this.min || value > this.max) {  
					return  
				}  
				if(value == this.min) {
					this.disableSubtract = false;
				}
				if(value == this.max) {
					this.disableAdd = false;
				}
				this.inputValue = value;  
			},  
			_getDecimalScale() {  
				let scale = 1;  
				// 浮点型  
				if (~~this.step !== this.step) {  
					scale = Math.pow(10, (this.step + '').split('.')[1].length);  
				}  
				return scale;  
			},  
			_onBlur(event) {  
				let value = event.detail.value;  
				if (!value) {  
					this.inputValue = this.min;  
					return  
				}  
				value = +value;
				if (value > this.max) {  
					value = this.max;  
				} else if (value < this.min) {  
					value = this.min  
				}  
				
				if(value == this.min) {
					this.disableSubtract = false;
				}
				if(value == this.max) {
					this.disableAdd = false;
				}
				this.inputValue = value  
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			getInfo() {
				serve.request({
                    url: '/shop/index/view',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        'local-city':uni.getStorageSync('localCity'),
                        id: this.id
                    }
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon : 'none',
                            success:function(){ 
                                setTimeout(function () { 
                                    this.jump('product_list')
                                }, 2000) 
                            } 
                        });
                        return;
                    }
                    this.info = res.data;
                    this.info.intro = Base64.decode(res.data.intro).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                    this.loadData(this.info);
                    if (this.disableAttrList) {
                        this.selAttrValName += '数量';
                        this.disableAttrList = false;
                    }
                    this.obtainStock('');
                    this.getCartNum();
                    if(this.info.series_id > 0) {
                        this.getSeriesList(this.info.series_id);
                    }
                });
			},
			loadData(selData) {
				this.inputValue = selData.min_buy;
				this.min = selData.min_buy;
				this.step = 1;
				this.selAttr.picture = selData.picture;
				this.selAttr.price = selData.nowPrice;
				// this.selAttr.point_exchange = selData.point_exchange;
				this.selAttr.stock = selData.stock;
				this.attributeList = selData.base_attribute_format;
				this.skuList = selData.sku;
				this.selAttrList = [];
				let name = '';
				let data = '';
				if( this.attributeList.length > 0) {
					this.attributeList.forEach((item, key) => {
						let specItem = item.value[0];
						this.$set(this.selAttrList, item.id, specItem.base_spec_value_id);
						name += specItem.title + ' ';
						data = data ? data + '-'+specItem.base_spec_value_id : specItem.base_spec_value_id;
					});
					
					this.skuList.forEach((item, key) => {
						if(item.data == data) {
							this.selSkuId = item.id;
							this.selAttr.picture = item.picture;
							this.selAttr.price = item.price;
							this.selAttr.stock = item.stock;
							this.max = selData.max_buy == 0 ? item.stock : selData.max_buy;
							return ;
						}
					});
				} else {
					let skuItem = this.skuList[0];
					this.selSkuId = skuItem.id;
					this.selAttr.picture = skuItem.picture;
					this.selAttr.price = skuItem.price;
					this.selAttr.stock = skuItem.stock;
					this.max = selData.max_buy == 0 ? skuItem.stock : selData.max_buy;
				}
				
				this.selAttr.data_name = name;
				this.obtainStock(data);
			},
			getSeriesList(seriesId) {
				serve.request({
					url: '/shop/index/series-list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						seriesId: seriesId,
						id: this.id,
						merchantId: this.info.merchantId
					}
				}).then(res => {
					this.seriesList = res.data;
					console.info(this.seriesList);
				})
			},
			selSeriesFun(index) {
				let seriesItem = this.seriesList[index];
				this.selSeriesId = seriesItem.id;
				this.selSkuId = 0;
				this.loadData(seriesItem);
			},
            productView() {
                if(this.selSeriesId == this.id) {
                    return ;
                }
                common.jump('product_view', 'merchantId='+this.info.merchantId+'&id='+this.selSeriesId);
            },
            showCommission(){
                uni.showModal({
                    title: this.info.commissonRemark.title,
                    content: this.info.commissonRemark.content,
                	showCancel: false
                });
            },
			showReduction() {
                var self = this;
				if(self.info.isReduction == 0) {
					return ;
				}
                if(self.reductionRemark == ''){
                    serve.request({
                        url: '/shop/index/reduction-list',
                        data: {
                            appkey: uni.getStorageSync('appkey'),
                            'access-token': uni.getStorageSync('access-token'),
                            id: self.id,
                        }
                    }).then(res => {
                        self.reductionRemark = res.data;
                        uni.showModal({
                            title: '当前商品参与以下活动',
                            content: self.reductionRemark,
                        	showCancel: false
                        });
                    });
                } else {
                    uni.showModal({
                        title: '当前商品参与以下活动',
                        content: self.reductionRemark,
                    	showCancel: false
                    });
                }
            },
            getEvaluateList(){
				var self = this;
				serve.request({
                    url: '/shop/index/product-evaluate',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: self.id,
                    }
                }).then(res => {
                    self.evaluateList = res.data;
                    self.evaluateList.forEach((item, index) => {
                        if(item.covers.length > 0) {
                            self.imgList[item.id] = [];
                            item.covers.forEach((imgItem, imgKey) => {
                                self.imgList[item.id][imgKey] = imgItem.imgUrl;
                            });
                        }
                    });
                    self.$forceUpdate();
                });
			},
			selAttrFun(index, index1) {
				if(this.noStockList.indexOf(this.attributeList[index].value[index1].base_spec_value_id) >= 0) {
					return ;
				}
				if(this.selAttrList[this.attributeList[index].id] == this.attributeList[index].value[index1].base_spec_value_id) {
					this.selAttrList[this.attributeList[index].id] = 0;
				} else {
					this.$set(this.selAttrList, this.attributeList[index].id,  this.attributeList[index].value[index1].base_spec_value_id);
				}
				let name = '';
				let data = '';		
				this.attributeList.forEach((item, key) => {
					if(this.selAttrList[item.id]){
						item.value.forEach((attrVal, key) => {
							if(attrVal.base_spec_value_id == this.selAttrList[item.id]) {
								name += attrVal.title + ' ';
								data = data ? data + '-'+attrVal.base_spec_value_id : attrVal.base_spec_value_id;
							}
						});
					}
				});
				this.selAttr.data_name = name;
				this.selSkuId = 0;
				this.skuList.forEach((item, key) => {
					if(item.data == data) {
						this.selSkuId = item.id;
						this.selAttr.picture = item.picture;
						this.selAttr.price = item.price;
						this.selAttr.stock = item.stock;
						this.max = this.info.max_buy == 0 ? item.stock : this.info.max_buy;
						return ;
					}
				});
				this.obtainStock(data);
				this.$forceUpdate();
			},
			obtainStock(data) {
				this.noStockList = [];
				if(this.attributeList.length == 1) {
					this.skuList.forEach((item, key) => {
						if(item.stock == 0) {
							this.noStockList.push(item.data);
						}
					});
				} else {
					if(data == '') {
						return ;
					}
					let nowDataNum = data.split("-");
					if(this.attributeList.length - nowDataNum.length <= 1) {
						for(let j in nowDataNum){
							this.skuList.forEach((item, key) => {
								// console.info("1 - " + item.data);
								if(item.data.indexOf(nowDataNum[j]) >= 0 && item.stock == 0) {
									let dataArr = item.data.split("-");
									// console.info("2 - " +dataArr);
									for(let i in dataArr) {
										// console.info("3 - " +dataArr[i]);
										if(nowDataNum.indexOf(dataArr[i]) < 0) {
											this.noStockList.push(dataArr[i]);
										}
									}
								}
							});
						}
					}
				}
			},
			editSubType(subType) {
				this.subType = subType;
				this.open();
			},
			subSel(tempType = '') {
				if(this.selSkuId == 0) {
					uni.showToast({
						title: '请选择产品属性',
						icon : 'none'
					});
					return ;
				}
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				let nextType = tempType == '' ? this.subType : tempType;
				this.isSelNum = true;
				this.selAttrValName = this.selAttr.data_name + "数量："+this.inputValue;
				if(nextType == 'addCart') {
					this.addCart();
				} else if(nextType == 'addOrder'){
					this.close();
					this.jump('addOrder', 'type=buy_now&product_id='+this.id+'&sku_id='+this.selSkuId+'&num='+this.inputValue);
				}
				
			},
			addCart() {
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				if(this.selSkuId == 0) {
					uni.showToast({
						title: '请选择产品属性',
						icon : 'none'
					});
					return ;
				}
				uni.showLoading({
					title: '操作中···',
					mask: true
				});
				serve.request({
					url: '/member/cart-item/create',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						'sku_id': this.selSkuId,
						num: this.inputValue
					}
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: res.message,
						icon : 'none'
					});
					if(res.code == 200) {
						this.close();
						this.getCartNum();
					}
				});
			},
			getCartNum() {
				if(uni.getStorageSync('access-token') == '') {
					return ;
				}
				serve.request({
                    url: '/shop/index/cart-num',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        merchantId: this.info.merchantId
                    }
                }).then(res => {
                    this.cartNum = res.data.num;
                });
			},
			collectThis(){
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				serve.request({
                    url: '/common/collect/operate',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        type: 'product',
                        id : this.id
                    }
                }).then(res => {
                    uni.showToast({
                        title: res.message,
                        icon : 'none'
                    });
                    if(res.code == 200) {
                        this.info.myCollect = this.info.myCollect == 1 ? 0 : 1;
                    }
                });
			},
			getShareItem(){
				serve.request({
                    url: '/share/index',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        type: 'product',
                        id: this.id
                    }
                }).then(res => {
                    this.shareItem.title = res.data.title;
                    this.shareItem.path = res.data.path;
                    this.shareItem.imageUrl = res.data.imageUrl;
                });
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgKey = e.target.dataset.id;
				uni.previewImage({
					current: current,
					urls: this.imgList[imgKey]
				});
				return ;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 178;
			}
			this.id = options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('return_one')
						}, 2000) 
					}
				});
			}
			this.selSeriesId = this.id;
			this.getInfo();
			this.getEvaluateList();
			this.getShareItem();
			// this.getCartNum();
		},
		onPullDownRefresh() {
			this.getInfo();
			// this.getCartNum();
		},
		onShareAppMessage(res) {
			console.info(this.shareItem);
			return this.shareItem;
		},
	}
</script>

<style scoped lang="scss">
	.productDetail {
		padding-bottom: 120upx;
        .pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			// padding-bottom: 140upx;
			.close{
				position: absolute;
				width:32upx;
				height:32upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 26upx;
				text:last-child{
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
		    .pay_bot {
		      width: 100%;
		      position: fixed;
		      left: 0;
		      bottom: 0upx;
		      height: 100upx;
		      background: rgba(255, 200, 10, 1);
		      color: #fff;
		      font-size: 32upx;
		      line-height: 100upx;
			  text-align: center;
		      border-radius: 0;
		      &::after{
		          border: none;
		      }
		    }
		}
		.popup {
			position: relative;
			// padding-bottom: 100upx;
			width: 100%;
			background: #FFFFFF;
            .close{
				position: absolute;
				width:32upx;
				height:32upx;
				top: 50upx;
				right: 40upx;
			}
			.goods_info {
				display: flex;
				padding: 50upx 30upx;
				box-sizing: border-box;
				width: 100%;

				image {
					width: 170upx;
					height: 170upx
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					margin-left: 18upx;

					.goods_num {
						display: flex;
						flex-direction: column;
						font-size: 20upx;
						color: rgba(153, 153, 153, 1);
						margin-top: 20upx;
					}
				}
			}

			.goods_size {
				padding: 0upx 0upx 0upx 30upx;
				box-sizing: border-box;

				.title {
					font-size: 32upx;
					margin-left: 13upx;
				}

				.size_item {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-;
					padding: 15upx 0upx 27upx;
					font-size: 28upx;

					.sel {
						width: 210upx;
						height: 64upx;
						line-height: 64upx;
						text-align: center;
						background: rgba(245, 245, 245, 1);
						border-radius: 32upx;
						margin-right: 30upx;
						margin-top: 12upx;
						color: #FFFFFF;
						background: rgba(255, 200, 10, 1);
					}

					.nosel {
						width: 210upx;
						height: 64upx;
						margin-right: 30upx;
						line-height: 64upx;
						text-align: center;
						background: rgba(245, 245, 245, 1);
						border-radius: 32upx;
						margin-top: 12upx;

						color: rgba(57, 72, 107, 0.8);
					}
				}

				.series_item {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-;
					padding: 15upx 10upx;
					font-size: 28rpx;
					border: 1rpx solid #ccc;
					margin: 10rpx;
					border-radius: 20rpx;
					
					.title{
						width: 69%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						width: 27%;
						text-align: right;
					}
				}
				
				.selSeries{
					color: #e00;
					border: 1rpx solid #e00;
				}
			}
			
	        .goods_num1{
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size:32upx;
				// .uni-numbox {
				// 	display: flex;
				// 	align-items: center;
				// 	height: 60upx;
				// 	background: rgba(255, 255, 255, 1);
				// 	border: 1upx solid rgba(60, 72, 104, 0.1);
				// 	border-radius: 32upx;
				// 	overflow: hidden;
				// }
				.uni-numbox {  
					display: flex;  
					flex-direction: row;  
					justify-content: flex-start;  
					height: 64upx;  
					border:1upx solid rgba(60,72,104,0.1);
					border-radius:32upx;
					overflow: hidden;
				}  
			
				.uni-numbox-minus,  
				.uni-numbox-plus {  
					margin: 0;  
					background-color: #f9f9f9;  
					width: 100upx;  
					height: 100%;  
					line-height: 64upx;  
					text-align: center;  
					color: #555555;  
				}  
			
				.uni-numbox-minus {  
					// border: 2upx solid #cccccc;  
					// border-right: none;  
					// border-top-left-radius: 6upx;  
					// border-bottom-left-radius: 6upx;  
				}  
			
				.uni-numbox-plus {  
					// border: 2upx solid #cccccc;  
					// border-left: none;  
					// border-top-right-radius: 6upx;  
					// border-bottom-right-radius: 6upx;  
				}  
			
				.uni-numbox-value {  
					// border: 1upx solid #cccccc;  
					background-color: #ffffff;  
					width: 100upx;  
					height: 100%; 
					 border-right: 1upx rgba(60,72,104,0.06) solid;
					 border-left: 1upx rgba(60,72,104,0.06) solid;
					text-align: center;  
				}  
			
				.uni-numbox-disabled {  
					color: #c0c0c0;  
				}  
			}
		    .goods_bot{
				position: fixed;
				bottom: 0upx;
				width:100%;
				height:100upx;
				line-height: 100upx;
				text-align: center;
				font-size:32upx;
				color: #FFFFFF;
				background:rgba(251,202,63,1);
			}
		}

		.bottom {
			position: fixed;
			justify-content: space-between;
			align-items: center;
			bottom: 0upx;
			height: 100upx;
			display: flex;
			width: 100%;
			background: #FFFFFF;

			.car {
				margin-left: 30upx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20upx;

				image {
					width: 44upx;
				}

				.carnum {
					position: absolute;
					right: 0upx;
					width: 30upx;
					height: 30upx;
					line-height: 30upx;
					text-align: center;
					color: #FFFFFF;
					font-size: 18upx;
					background: rgba(235, 89, 56, 1);
					border-radius: 50%;
				}
			}

			.nocollect {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20upx;

				image {
					width: 44upx;
					margin-bottom: 5upx;
				}
			}

			.collect {
				color: #FFC600;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20upx;

				image {
					width: 44upx;
					margin-bottom: 5upx;
				}
			}

			.right {
				display: flex;

				.add {
					width: 236upx;
					height: 100upx;
					line-height: 100upx;
					font-size: 32upx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					background: rgba(255, 200, 10, 1);
				}

				.pay {
					width: 236upx;
					height: 100upx;
					line-height: 100upx;
					font-size: 32upx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					background: #EB5938;
				}
			}
		}

		.swiper-box {
			width: 100%;
			height: 750upx;

			.swiper-item {
				width: 100%;

				image {
					width: 100%;
					height: 750upx;
				}
			}
		}

		.info {
			box-sizing: border-box;
			padding: 41upx 0upx 50upx 30upx;
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;

			.top {
				border-bottom: 1upx rgba(57, 72, 107, 0.08) solid;
				position: relative;

				.pic {
					display: flex;
					align-items: center;
					font-size: 20upx;
					align-items: center;

					text:nth-child(1) {
						font-size: 40upx;
						color: rgba(255, 198, 0, 1);
						margin-right: 10upx;
					}

					text:nth-child(3) {
						font-size: 20upx;
						color: rgba(57, 72, 107, 0.5);
						margin-left: 30upx;
						text-decoration: line-through;
					}
				}

				.title {
					view{
						margin-bottom: 20upx;
						color: #999;
					}
					view:first-child {
						font-size: 32upx;
						font-weight: bold;
						color: #000000;
					}
					padding: 40upx 20upx;
					
					.state{
					    padding: 5upx 8upx;
					    text-align: center;
					    color: #FFFFFF;
					    font-size: 32upx;
					    border-radius:2upx;
					    margin-right: 10upx;
					}
				}

				.share {
					position: absolute;
					// display: flex;
					right: 30upx;
					top: 0upx;
					align-items: center;
					font-size: 28upx;
					border: none;
					background: white;
				    display: flex;
					align-items: center;
					border: none;
					background: #FFFFFF;
					image {
						width: 32upx;
						height: 32upx;
						margin-right: 10upx;
					}
				}
			}

			.num {
				display: flex;
				padding-right: 30upx;
				padding-top: 30upx;
				justify-content: space-between;
				font-size: 28upx;
				color: rgba(57, 72, 107, 0.5);
			}
		}

		.line {
			display: flex;
			padding: 47upx 31upx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 16upx #FBFBFD solid;

			.left {
				display: flex;
				font-size: 28upx;
				align-items: center;

				text:last-child {
					margin-left: 30upx;
					color: rgba(57, 72, 107, 0.3);
				}
			}

			.right {
				position: relative;
				font-size: 28upx;
				color: rgba(57, 72, 107, 0.5);
				padding-right: 23upx;
			}

			.right::before {
				position: absolute;
				right: 0upx;
				top: -2upx;
				content: '';
				border: 1upx solid #CCCCCC;
				border-width: 0 1upx 1upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		.line1 {
			display: flex;
			padding: 47upx 31upx 0upx;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				font-size: 28upx;
				align-items: center;

				text:last-child {
					margin-left: 10upx;
				}
			}

			.right {
				position: relative;
				font-size: 24upx;
				color: rgba(57, 72, 107, 0.5);
				padding-right: 23upx;
			}

			.right::before {
				position: absolute;
				right: 0upx;
				top: 10upx;
				content: '';
				border: 1upx solid #CCCCCC;
				border-width: 0 1upx 1upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}


		.content {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 47upx 30upx;
			border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;

			.details {
				font-size: 28upx;
				line-height: 45upx;
				padding-top: 37upx;
				::v-deep {
				    img,p,span {
				       width: 100%;
				    }
				}
			}
			
			// .details >>> img,p,span {
			//   width: 100%;
			// }
			
			.content_title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				text-align: center;
				height: 24upx;
				line-height: 24upx;
			}

			.content_title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6upx;
				height: 24upx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2upx;
			}


		}

		.comment {
			display: flex;
			box-sizing: border-box;
			padding: 50upx 30upx;
			border-bottom: 1upx #EBECF0 solid;
		
			.left {
				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
				}
			}
		
			.right {
				margin-left: 13upx;
				width: 617upx;
		
				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.txt {
						display: flex;
						align-items: center;
		
						text:nth-child(1) {
							font-size: 28upx;
							font-weight: bold;
							color: #333333;
						}
		
						text:nth-child(2) {
							color: #999999;
							font-size: 20upx;
							margin-left: 25upx;
						}
					}
		
					.txt1 {
						color: #EB5938;
						font-size: 28upx;
					}
				}
		
				.txt2 {
					font-size: 28upx;
					color: #666666;
					margin-top: 30upx;
				}
		
				.comment_img {
					display: flex;
		
					image:first-child {
						margin-left: 0;
					}
		
					image {
						width: 190upx;
						height: 168upx;
						margin-top: 30upx;
						margin-left: 22upx;
					}
				}
		
				.txt3 {
					margin-top: 30upx;
					width: 614upx;
					box-sizing: border-box;
					background: rgba(240, 240, 240, 1);
					padding: 23upx 20upx 29upx;
					font-size: 28upx;
					color: #999999;
		
					text:first-child {
						font-weight: bold;
					}
				}
			}
		}

		.nocomment {
			font-size: 28upx;
			color: rgba(60, 72, 104, 0.5);
			width: 100%;
			padding: 87upx 0upx;
			text-align: center;
		}
		.content1 {
			box-sizing: border-box;
			width: 100%;
			padding: 18upx 30upx 18upx;
			border-bottom: 16upx #FBFBFD solid;
			.title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				text-align: center;
				height: 24upx;
				line-height: 24upx;
			}
		
			.title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6upx;
				height: 24upx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2upx;
			}
		
			.list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 30upx 0upx 0upx;
				.list_item {
					width: 330upx;
					padding-bottom: 30upx;
					image {
						width: 330upx;
						height: 340upx;
						border-radius: 3%;
					}
					.item_text{
						margin-top: 30upx;
						font-size:32upx;
						font-weight:bold;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.item_text1{
						font-size:32upx;
						color: #FFC600;
					}
				}
			}
		}
		.heng {
			width: 100%;
			height: 20upx;
			background: #F7F7F7;
		}
		.newBtn{
			display: flex;
			view{
				// position: fixed;
				bottom: 0upx;
				width:50%;
				height:100upx;
				line-height: 100upx;
				text-align: center;
				font-size:32upx;
				color: #FFFFFF;
				background:rgba(251,202,63,1);
			}
		}
        
        .con-img{
            width: 64upx;
            height: 64upx;
        }
	}
</style>
